<template>
    <div class="search">
        <div class="searchTop">
        <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <input type="text" placeholder="陈奕迅" @keydown.enter="enterKey" v-model="searchKey">
        <button @click="enterKey" style="color:#999;">搜索</button>
        </div>
        <div class="searchHistory">
            <span class="searchSpan">历史</span>
            <span v-for="item in keyworldList" :key="item" class="spanKey" @click="searchHistory(item)">
                {{item}}
            </span>
            <svg class="icon" aria-hidden="true" @click="delHistory">
                    <use xlink:href="#icon-shanchu"></use>
            </svg>
        </div>
        <div class="itemlist" v-for="(item,index) in searchList" :key="index">
                <div class="itemListInfo" @click="updateIndex(item)">
                    <span class="number">{{index+1}}</span>
                    <div class="itemListName">
                        <span class="musicName">{{item.name}}</span>
                        <div class="authorName">
                            <span v-for="(item1,index) in item.artists" :key="index">
                                {{ item1.name }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="itemListRight">
                    <svg class="icon videoIcon" aria-hidden="true" v-if="item.mvid !==0">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31liebiao"></use>
                    </svg>
                </div>
        </div>
    </div>
</template>
<script>
    import {getSearchMusic} from '@/request/api/home.js'
    export default{
        data(){
            return{
                keyworldList:[],//保存历史记录
                searchKey:"", //拿到输入框输入的查询记录
                searchList:[],
            }
        },
        mounted(){ 
            this.keyworldList=JSON.parse(localStorage.getItem('keyworldList')) || []
        },
        methods:{
            enterKey:async function(){
                if (this.searchKey!="") {
                    this.keyworldList.unshift(this.searchKey)
                    // 数组去重
                    this.keyworldList=[...new Set(this.keyworldList)]
                    // 固定长度,超过长度删除最后一个
                    if (this.keyworldList.length>10) {
                        this.keyworldList.splice(this.keyworldList.length-1,1)
                    }
                    localStorage.setItem("keyworldList",JSON.stringify(this.keyworldList)) //localStorage可以长期保存数据
                    // 调用接口获取歌曲
                    let res=await getSearchMusic(this.searchKey)
                    // console.log(res)
                    this.searchList=res.data.result.songs
                    this.searchKey=""//按下回车之后清空输入框
                    }
            },
            delHistory:function(){
                localStorage.removeItem("keyworldList")
                this.keyworldList=[]
            },
            searchHistory:async function(item){
                let res=await getSearchMusic(item)
                console.log(res)
                this.searchList=res.data.result.songs 
            },
            updateIndex:function(item){
                item.al=item.album
                item.al.picUrl=item.album.artist.img1v1Url
                this.$store.commit("pushPlayList",item)
                this.$store.commit("updatePlayListIndex",this.$store.state.playList.length-1)
                console.log(item)
            }
        }
    }
</script>
<style lang="less" scoped>
    .search{
        margin-bottom: 1.5rem;
        .searchTop{
            width: 100%;
            height: 1rem;
            padding: 0 .2rem;
            display: flex;
            align-items: center;
            input{
                margin-left: .2rem;
                border: none;
                border-bottom: 1px solid #999;
                width: 75%;
                padding: .1rem;
            }
        }
        .searchHistory{
            width: 100%;
            padding: .2rem;
            position: relative;
            .searchSpan{
                font-weight: 700;
            }
            .spanKey{
                padding: .1rem .2rem;
                border-radius: .4rem;
                margin: .1rem .2rem;
                background-color: rgb(210, 202, 202);
                display: inline-block;
            }
            .icon{
                width: .4rem;
                height: .4rem;
                position: absolute;
                right: .2rem;
            }
        }
        .itemlist{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 1rem;
                margin-top: .3rem;
                padding: .2rem;
                .itemListInfo{
                    display: flex;
                    justify-content: space-between;
                    .number{
                        padding-top: .2rem;
                        margin: 0 0.3rem 0 .1rem;
                    }
                    .itemListName{
                        display: flex;
                        flex-direction: column;
                        .musicName{
                            font-weight: 700;
                            width: 4rem;
                            /*第一步： 溢出隐藏 */
                            overflow: hidden;
                            /* 第二步：让文本不会换行， 在同一行继续 */
                            white-space: nowrap;
                            /* 第三步：用省略号来代表未显示完的文本 */
                            text-overflow: ellipsis
                        }
                        .authorName{
                            color: rgb(138, 137, 137);
                            margin-top: .08rem;
                            font-size: 0.2rem;
                            display: flex;
                            width: 4rem;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            span{
                                margin-right:.1rem;
                            }
                        }
                    }
                }
                .itemListRight{
                    margin-top: .2rem;
                    .icon{
                        fill:rgb(138, 137, 137);
                    }
                    .videoIcon{
                        margin-right: .3rem;
                    }
                }
            }
    }
</style>